<!DOCTYPE html>
<html>
<head>
    <title>Chat API 测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #log { background: #f0f0f0; padding: 10px; height: 300px; overflow-y: auto; margin: 10px 0; }
        input, button { padding: 8px; margin: 5px; }
        input { width: 300px; }
    </style>
</head>
<body>
    <h1>Chat API 调试测试</h1>
    
    <div>
        <input type="text" id="messageInput" placeholder="输入测试消息" value="你好">
        <button onclick="testChat()">发送测试请求</button>
        <button onclick="clearLog()">清空日志</button>
    </div>
    
    <div id="log"></div>

    <script>
        const apiBaseUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/api`;
        
        function log(message) {
            const logDiv = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${time}] ${message}<br>`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }
        
        function clearLog() {
            document.getElementById('log').innerHTML = '';
        }
        
        async function testChat() {
            const message = document.getElementById('messageInput').value.trim();
            if (!message) return;
            
            log(`🔧 API URL: ${apiBaseUrl}/chat`);
            log(`📦 发送请求: { "message": "${message}" }`);
            
            try {
                const response = await fetch(`${apiBaseUrl}/chat`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ message })
                });
                
                log(`📊 响应状态: ${response.status} ${response.statusText}`);
                
                if (!response.ok) {
                    const errorText = await response.text();
                    log(`❌ 错误响应内容: ${errorText}`);
                    return;
                }
                
                const data = await response.json();
                log(`✅ 响应数据: ${JSON.stringify(data, null, 2)}`);
                
            } catch (error) {
                log(`❌ 请求失败: ${error.message}`);
                console.error('请求失败:', error);
            }
        }
        
        log(`🚀 测试页面加载完成，API基础URL: ${apiBaseUrl}`);
        
        // 页面加载时自动测试一次
        window.onload = () => setTimeout(testChat, 1000);
    </script>
</body>
</html>










